<template>
  <div class="wp">
    <div class="fixed">
      <div class="content-wp">
        <div class="defaultBlock" v-for="(v,i) in data" :key="i">
          <img class="img" :src="v.imgurl" alt />
          <div class="mama van-multi-ellipsis--l2">{{v.title}}</div>
          <div class="jiaq">
            <div class="daz">
              <div class="hong">￥{{v.newPrice}}</div>
              <div class="hui">￥{{v.oldPrice}}</div>
            </div>
            <div class="car" @click="shopCar(v)">
              <img class="mini-shop" src="../assets/img/2.png" alt />
            </div>
          </div>
          <van-action-sheet v-model="show" title="商品">
            <div class="content">
              <div class="neir">
                <div>
                  <img class="lookImg" :src="shop.img" alt />
                </div>
                <div class="youjia">
                  <div class="jiaqian">￥{{shop.price}}</div>
                  <div class="kucun">库存充足</div>
                  <div class="taoc">已选 S 60片，单包</div>
                </div>
              </div>
              <div class="over">
                <div class="gui">规格</div>
                <div class="guige">
                  <button
                    class="btn"
                    v-for="(item,index) in shop.specification"
                    :class="[item == items ? 'red' : 'btn']"
                    @click="guiClick(item)"
                    :key="index"
                  >{{item}}</button>
                </div>
              </div>
              <div class="zuih">
                <div>数量</div>
                <van-stepper v-model="value" theme="round" button-size="22" disable-input />
              </div>
            </div>
            <div class="zuijia">
              <van-button
                size="large"
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                @click="addShopCar"
              >加入购物车</van-button>
            </div>
          </van-action-sheet>
        </div>
      </div>
    </div>
    <van-tabbar border placeholder>
      <!-- <van-tabbar-item active-color="#7d7e80" icon="shopping-cart-o"></van-tabbar-item> -->
      <div class="zongj">
        <img class="bottom-img" @click="gwFn" src="../assets/img/购物车.png" alt />
        <div class="number" v-if="number">{{number}}</div>
        <span class="total">总计:</span>
        <span class="money">
          ￥
          <em>{{num.toFixed()}}</em>
        </span>
      </div>
      <div>
        <van-button type="danger" @click="buy">立即购买</van-button>
      </div>
    </van-tabbar>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { gwlocal, jzlocal } from "../utils/localStorage";
export default {
  name: "Lvar",
  data() {
    return {
      data: [],
      show: false,
      shop: {},
      value: 1,
      items: "套餐一",
      goods: {
        bm: "套餐一",
        allPrice: 1,
      },
      arr: [],
      num: 0,
      allNum: 0,
      number: 0,
    };
  },
  methods: {
    ...mapActions("Lvar", ["getShoops"]),
    shopCar(item) {
      this.show = true;
      let r = ["套餐一", "套餐二", "套餐三"];
      this.shop = {
        img: item.imgurl,
        price: item.newPrice * 1,
        specification: r, // 规格
        id: item.id, // 规格
      };
    },
    guiClick(v) {
      this.items = v;
    },
    //购物车页面
    gwFn() {
      this.$router.push("/shoopcar");
    },
    // 加入购物车
    addShopCar() {
      let arr = gwlocal.get();
      let item = arr.find((v) => v.id == this.shop.id && v.bm == this.items);
      if (item) {
        item.num += this.value;
      } else {
        arr.push({
          num: this.value,
          bm: this.items,
          id: this.shop.id,
          price: this.shop.price,
        });
      }
      this.num = 0;
      arr.reduce((v, i) => {
        if (i.price) {
          let pirce = i.price * 1;
          // 有这个属性的就是分类页面
          this.num += pirce * i.num;
        }
      }, 0);
      gwlocal.set(arr);

      this.number = arr.reduce((v, i) => {
        return (v += i.num);
      }, 0);
      this.show = false;
    },
    // 立即购买
    buy() {
      let arr = gwlocal.get();
      let lj = arr.filter((v) => v.price);
      jzlocal.set(lj);
      this.$router.push("/groupon");
    },
  },
  async mounted() {
    await this.getShoops();
    let r = this.shoops.filter((v) => {
      return this.$route.query.id == v.tid;
    });
    this.data = r;
    let arr = gwlocal.get();
    arr.reduce((v, i) => {
      if (i.price) {
        let pirce = i.price * 1;
        console.log(pirce);
        // 有这个属性的就是分类页面
        this.num += pirce * i.num;
      }
    }, 0);
    this.number = arr.reduce((v, i) => {
      return (v += i.num);
    }, 0);
  },
  computed: {
    ...mapState("Lvar", ["shoops"]),
  },
};
</script>

<style scoped>
.wp {
  background-color: #99999917;
  /* margin-top: 0.3rem; */
  height: 10.3rem;
}

.fixed {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.bottom-img {
  width: 0.62rem;
  height: 0.62rem;
  margin: 0.15rem 0 0 0.1rem;
}

[type="danger"] {
  right: 0;
  top: 0;
  bottom: 0;
}

.van-tabbar {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ccc;
}

.van-tabbar__placeholder >>> .van-tabbar--fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: space-between;
}

.zongj {
  display: flex;
  justify-content: space-between;
}

.total {
  color: #999;
  font-size: 0.23rem;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
}

.money {
  color: #ea4141;
  font-size: 0.2rem;
  margin-top: 0.26rem;
}

.money em {
  font-size: 0.32rem;
  font-weight: 600;
  font-style: normal;
}

/* .content-wp {
  display: flex;
  justify-content: space-between;
} */

.defaultBlock {
  height: 3.4rem;
  width: 30%;
  margin-left: 0.18rem;
  background-color: #fff;
  float: left;
  margin-top: 0.2rem;
}

/* .defaultBlock1 {
  height: 3.4rem;
  width: 30%;
  background-color: #fff;
}

.defaultBlock2 {
  height: 3.4rem;
  width: 30%;
  margin-right: 0.18rem;
  background-color: #fff;
} */

.img {
  width: 100%;
  height: 2rem;
}

.mama {
  font-size: 0.19rem;
  width: 76%;
  text-align: center;
  margin: 0 auto;
  margin-top: 0.1rem;
  height: 0.5rem;
}

.jiaq {
  width: 85%;
  margin: 0 auto;
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-between;
}

.hong {
  color: #ea4141;
}

.hui {
  font-size: 0.16rem;
  color: #ccc;
  text-decoration: line-through;
}

.car {
  height: 0.5rem;
  width: 0.5rem;
  border: 1px solid #ea4141;
  border-radius: 100%;
}

img.mini-shop {
  width: 0.4rem;
  height: 0.4rem;
  transform: translate(0.04rem, 0.07rem);
}

.van-action-sheet__content {
  height: 6rem;
}

.lookImg {
  width: 2.5rem;
  height: 2.5rem;
}

.content {
  padding: 0.2rem;
}

.neir {
  display: flex;
  height: 3rem;
  border-bottom: 1px solid #ccc;
}

.jiaqian {
  color: #ea4141;
  font-weight: 700;
  font-size: 0.4rem;
}

.kucun {
  color: #999;
  font-size: 0.25rem;
}

.taoc {
  font-size: 0.3rem;
}

button.btn {
  font-size: 0.3rem;
  background: #f5f5f5;
  border: 1px solid;
  margin-left: 0.4rem;
  padding: 0.1rem 0.3rem;
  margin-top: 0.1rem;
  border-radius: 0.1rem;
}

.gui {
  margin: 0.2rem 0;
}

button.van-button.van-button--danger.van-button--normal {
  height: 100%;
}

.guige {
  margin-bottom: 0.1rem;
}

/* .guige > button:first-child {
  color: red;
  border: 1px solid red;
} */

.zuijia {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.youjia {
  margin-left: 0.2rem;
}

.over {
  overflow: hidden;
  overflow-y: auto;
  height: 2.5rem;
}

.van-popup.van-popup--round.van-popup--bottom.van-popup--safe-area-inset-bottom.van-action-sheet {
  height: 10rem;
}

.red {
  color: red;
  border: 1px solid red;
}

.zuih {
  display: flex;
  justify-content: space-between;
}

.number {
  height: 0.25rem;
  width: 0.25rem;
  background: red;
  border-radius: 100%;
  position: absolute;
  top: 0.1rem;
  left: 0.6rem;
  color: #fff;
  text-align: center;
  line-height: 0.25rem;
  font-size: 0.1rem;
}
</style>